<template>
	<view class="activitys-cards">
		<!-- 活动卡片 -->
		<view class="card-item" v-for="(item,index) in activitydetails" :key="index">
			<!-- 卡片上侧 -->
			<view class="card-up">
				<span class="activitys-name" :data-text='item'>
					{{item.name}}
				</span>
				<span class="activitys-info">
					{{item.info}}
				</span>
				<span class="activitys-dead">
					{{item.deadline}}
				</span>
			</view>
			<view class="card-down">
				<image class="card-img" :src="imagesUrl('矩形 2737.png')" mode="aspectFill" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activitydetails: [{
						name: '爆团',
						info: '日常活动，长期开启'
					},
					{
						name: '神之一手',
						info: '福利活动，限时开启',
						deadline: '距离结束：23：59：59'
					},
					{
						name: '新手福利',
						info: '限时活动',
						deadline: '距离结束：3天'
					},
					{
						name: '新手福利',
						info: '限时活动',
						deadline: '距离结束：3天'
					},
					{
						name: '新手福利',
						info: '限时活动',
						deadline: '距离结束：3天'
					}
				],
				couponprice: 108,
				joinnum: 3,
				bannerList: [
					'/static/images/hot/pinkdoll.png',
					'/static/images/hot/pinkdoll.png',
					'/static/images/hot/pinkdoll.png',
					'/static/images/hot/pinkdoll.png',
					'/static/images/hot/pinkdoll.png',
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activitys-cards {
		.card-item {
			border-radius: 15rpx;
			margin: 26rpx auto;
			color: white;
			width: 690rpx;
			height: 300rpx;
			background-color: rgb(29, 29, 29);
			display: flex;
			flex-direction: column;
			justify-content: left;
			align-items: center;
			position: relative;

			.card-up {
				font-size: 24rpx;

				width: 690rpx;
				height: 276rpx;

				.activitys-name {
					color: #ff7803;
					font-weight: 400;
					position: relative;
					z-index: 0;
				}

				// .activitys-name::before,
				// .activitys-name::after {
				// 	content: attr(data-text);
				// 	position: absolute;
				// 	left: 0;
				// 	z-index: -1;
				// }

				// .activitys-name::before {
				// 	-webkit-text-stroke: 20rpx #fff;
				// }

				// .activitys-name::after {
				// 	-webkit-text-stroke: 10rpx #000000;
				// }
			}

			.card-down {
				width: 690rpx;
				height: 276rpx;

				.card-img {
					width: 690rpx;
					height: 276rpx;
				}
			}
		}
	}
</style>